// Object with a default value
  propE: {
    type: Object,
    // Object or array defaults must be returned from
    // a factory function
    default() {
      return { message: 'hello' }
    }
  },

    // Object with a default value
    propE: {
      type: Object,
      // Object or array defaults must be returned from
      // a factory function. The function receives the raw
      // props received by the component as the argument.
      default(rawProps) {
        // default function receives the raw props object as argument
        return { message: 'hello' }
      }
    },

        // default function receives the raw props object as argument

<template>
  <div>
    <Comp :propA="43" />
    <Comp :propA="44" :propE="{ message: 'good day' }" />
    <Opt :propA="43" />
    <Opt :propA="44" :propE="{ message: 'good day' }" />
  </div>
</template>

<template>
  <div>Comp: {{ propE }}</div>
</template>

<script setup>
defineProps({
  propA: {
    type: Number,
    default: 42,
  },
  propE: {
    type: Object,
    default(rawProps) {
      return {
        message: `hello ${rawProps.propA}`
      };
    },
  },
});
</script>

<template>
  <div>Opt: {{ propE }}</div>
</template>

<script>
export default {
  props: {
    propA: {
      type: Number,
      default: 42,
    },
    propE: {
      type: Object,
      default(rawProps) {
        return {
          message: `hello ${rawProps.propA}`
        };
      },
    },
  }
};
</script>